/*
 * @Author: cx19940809
 * @Date: 2025-04-01 15:59:37
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-06-12 00:20:39
 * @FilePath: /leosmart/src/pages/InstallerMain/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {useTranslation} from 'react-i18next';

// 导入页面组件
import ErrorBoundary from '@/components/ErrorBoundary';
import SafeAreaLayout from '@/components/SafeAreaLayout';
import OverviewIconSelected from '@/assets/icon/overview-selected.svg';
import MonitorSelected from '@/assets/icon/Monitor-selected.svg';
import MineSelect from '@/assets/icon/mine-selected.svg';
import {Icon, useAppTheme} from 'tsun-smart-ui';
import Monitor from './monitor';
const Tab = createBottomTabNavigator();
const InstallerMainScreen = () => {
  const theme = useAppTheme();
  const {t} = useTranslation();
  return (
    <Tab.Navigator
      screenLayout={props => {
        return <ErrorBoundary {...props}></ErrorBoundary>;
      }}
      screenOptions={{
        animation: 'fade',
        headerShown: false,
        tabBarInactiveTintColor: theme.colors?.neutral?.primary,
        tabBarActiveTintColor: theme.colors?.neutral?.title,
        headerStyle: {
          backgroundColor: 'transparent',
        },
      }}>
      <Tab.Screen
        name="Overview"
        getComponent={() => require('@/pages/scene/InstallerMain/overview').default}
        options={{
          title: t('workplace.docs.Overview', {defaultValue: '概览'}),
          headerShown: true,
          headerShadowVisible:false,
          tabBarIcon: ({size, focused}) =>
            !focused ? (
              <Icon name="overview" size={size} color={theme.colors?.neutral?.primary} />
            ) : (
              <OverviewIconSelected width={size} height={size} color={theme.colors?.neutral?.title} />
            ),
          headerTransparent: true,
        }}
      />
      <Tab.Screen
        name="Monitor"
        component={Monitor}
        layout={SafeAreaLayout}
        options={{
          title: t('mn.monitor', {defaultValue: '监控'}),
          tabBarIcon: ({size, focused}) => (
            <>
              {!focused ? (
                <Icon name="Monitor" size={size} color={theme.colors?.neutral?.primary} />
              ) : (
                <MonitorSelected width={size} height={size} color={theme.colors?.neutral?.title} />
              )}
            </>
          ),
        }}
      />
      <Tab.Screen
        name="Mine"
        getComponent={() => require('@/pages/common/Profile').default}
        options={{
          title: t('userInfo.title.my', {defaultValue: '我的'}),
          tabBarIcon: ({size, focused}) => (
            <>
              {!focused ? (
                <Icon name="my" size={size} color={theme.colors?.neutral?.primary} />
              ) : (
                <MineSelect width={size} height={size} color={theme.colors?.neutral?.title} />
              )}
            </>
          ),
          headerShown: true,
          headerShadowVisible: false,
          headerTintColor: theme.colors?.neutral?.title,
        }}
      />
    </Tab.Navigator>
  );
};

export default InstallerMainScreen;
